<template>
	<view class="momentMaterials">
		<view class="list">
			<view class="item" v-for="item in list" @click="detail(item)">
				<view class="name">
					{{item.name}}
				</view>
				<view class="cont">
					<view class="tit">
						{{item.title}}
					</view>
					<view class="desc">
					{{item.brief}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[]
			}
		},
		onLoad() {
			this.$u.api.friendCircleCategory()
				.then(res => {
					console.log(res,666666);
					this.list =res?.data
				});
		},
		methods:{
			detail(item){
				uni.navigateTo({
					url:"/subPack/marketing/momentMaterialsDetail?id="+item.id+'&title='+item.title
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.momentMaterials {
		padding: 0 40rpx;

		.item {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			border-bottom: 1rpx solid #F6F6F6;
			padding: 24rpx 4rpx;

			.name {
				margin-right: 32rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				width: 96rpx;
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FA4A53;
				border-radius: 66rpx 66rpx 66rpx 66rpx;
			}

			.cont {
				flex: 1;

				.tit {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 40rpx;
				}

				.desc {
					margin-top: 10rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(15, 20, 23, 0.4);
					line-height: 28rpx;
				}
			}

		}
	}
</style>
